<template>
  <div>
    <el-button type="primary" @click="importExcel()">导入Excel</el-button>
    <el-dialog :visible.sync = 'dialogImport'>
      <el-upload
          class="upload-demo"
          action="#"
          :auto-upload='false'
          :http-request='uploadFile'
          :on-change="handleChange"
          ref='ref_importExcel'
          accept="'.xlsx','.xls'"
          :show-file-list='isShow' >
        <el-input slot='trigger' v-model='importFilename' style='width:260px' placeholder="请选择文件"/>
        <el-button v-show="this.isShow" style='margin-left:20px' type="primary" @click='submitFile'>开始上传</el-button>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Operation-Excel",
  data() {
    return {
      dialogImport: false,
      importFilename: '',
      isShow: false,
      uploadExcel: null,
    }
  },
  methods: {
    importExcel() {
      this.dialogImport = true
      this.importfilename = ''
      this.isShow = false
      this.$nextTick(() => {
        this.$refs.ref_importExcel.clearFiles();
      })
    },
    handleChange(File) {
      let xls = File.name.split('.')
      if(xls[1] === 'et' || xls[1] === 'xls' || xls[1] === 'xlsx') {
        this.isShow = true
        this.importFilename = File.name;
        this.uploadExcel = File;
      } else {
        this.$message({
          message: '上传的文件只能是excel文件',
          type: "error"
        })
        this.isShow = false;
        this.importFilename = '';
        this.$refs.ref_importExcel.clearFiles();
      }
    },
    submitFile() {
      if(this.importFilename === '') {
        this.$message.warning("未找到上传的文件")
      } else {
        this.$refs.ref_importExcel.submit();  // ??????
        this.dialogImport = false;
      }
    },
    //开始上传
    uploadFile(file) {
      const formData = new FormData();
      formData.append('importFile', file.file);
      console.log(formData);
      debugger;
      //interface --- 调用接口服务
      this.$axios({
        method: 'post',
        url: '/api/file/importFile',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data;charset=UTF-8'
        }
      }).then(res=>{
        console.log('axios-post: success:' + res);
      }).catch(err=>{
        console.log('axios-post: error:' + err);
      })
    }


  }
}
</script>

<style scoped>

</style>
